<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-cloak可以解决插值表达式的闪烁问题 -->
        <p v-cloak>+++++++++{{msg}}-----------------</p>
        <!-- v-text默认是没有闪烁问题的 -->
        <!-- v-text会覆盖元素中原来的内容，插值表达式只会替换占位符，不会把整个内容替换 -->
        <h3 v-text="msg">===========</h3>
        <!-- 如果是带有标签的字符串 需要使用v-html解析 -->
        {{msg2}}
        <div v-text="msg2">{{msg2}}</div>
        <div v-html="msg2">{{msg2}}</div>
        <!-- v-bind vue提供绑定属性的指令 让html属性可以关联vue定义的数据 -->
        <!-- v-bind 可以简写为：要绑定的属性 -->
        <input type="button" value="按钮" v-bind:title="mytitle + '123'" />
        <!-- v-on 绑定事件 -->
        <!-- v-on 可简写为@ -->
        <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="show" />
        <input type="button" value="按钮" :title="mytitle + '123'" @click="show" />
        <!-- 简单实现跑马图 -->
        <input type="button" value="浪起来" @click="lang" />
        <input type="button" value="低调" @click="stop" />
        <h2>{{content}}</h2>
    </div>

    <script src="../lib/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '123',
                msg2: '<h2>我是一个h2</h2>',
                mytitle: '这是一个title',
                content: '猥琐发育，别浪！',
                timer: null
            },
            methods: {
                show: function () {
                    alert('hello');
                },

                lang() {
                    this.timer = setInterval(() => {
                        var start;
                        var end;

                        start = this.content.substring(1);
                        end = this.content.substring(0, 1);
                        this.content = start + end;
                    }, 100);
                },
                stop() {
                    clearInterval(timer);
                }
            }
        })
    </script>
</body>

</html>